<template>
	<view class="page-container">
		<view class="auth-box">
			<view class="logo-text">
				欢迎登录壹度便利
			</view>
			<image src="/static/image/logIn_img_logo@3x.png" class="logo-img" />
			<view class="ccuts-content">
				<view class="phone-number">
					{{phone}}
				</view>
				<view class="phone-number-01">
					不开放注册，仅对壹度便利内部使用
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="getPhoneNumber" class="btn" @getphonenumber="decryptPhoneNumber">授权本机号码一键登录</button>
			<!-- #endif -->
			<view class="agreement">
				<view class="content-main" @click="toAuthorize">
					<view class="authorize">
						<view v-if="!authorize" class="circle"></view>
						<view class="text-02" v-else>
							<view class="circle"></view>
							<image src="/static/image/logIn_ic_selected@3x.png" class="select-circle" />
						</view>

						<!-- <text class="info">如您点击授权，您将同意并授权</text> -->
					</view>
					<text class="detail">
						<!-- <view v-if="!authorize" class="circle"></view> -->
						<text class="argree">我已阅读并同意</text>
						<text @click.stop="openService" class="style">《用户服务协议》</text>、
						<text @click.stop="openPrivacy" class="style">《隐私政策》</text>
					</text>
				</view>

			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<privacy v-if="showPrivacy" @agree="agree"></privacy>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		getOpenId,
		getAliUserId,
		getUserPhone,
		getChatUserPhone
	} from '../../api';
	import {
		singleSignOn
	} from '../../utils/base.js';
	import privacy from './components/privacy.vue'
	export default {
		components: {
			privacy
		},
		data() {
			return {
				authorize: false,
				code: '',
				authCode: '',
				token: '',
				showPrivacy: false,
				phoneCode: '',
				phone: "",
				loginURL: {
					'0': '',
					'1': '',
					'2': ''
				}
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			singleSignOn().then(loginRes => {
				this.getOpenId(loginRes.code);
			})
			this.getPrivary()
			// #endif

		},
		methods: {
			//隐私
			getPrivary() {
				let that = this;
				if (wx.getPrivacySetting) {
					wx.getPrivacySetting({
						success(res) {
							console.log(res, "--隐私设置-")
							that.showPrivacy = res.needAuthorization
						}
					})
				}
			},
			async getOpenId(loginCode) {
				// debugger
				try {
					const {
						code,
						data,
						errMsg
					} = await getOpenId({
						code: loginCode
					});
					if (+code === 0) {
						this.handlderUserInfo(data || {})
					} else {
						this.$toast(errMsg || '获取token失败～');
					}
				} catch (error) {
					console.error(error);
				}
			},
			async getChatUserPhone(params) {
				try {
					const {
						code,
						data,
						errMsg
					} = await getChatUserPhone({
						...params
					});
					if (+code === 0) {
						// this.phone = data.phone
						uni.setStorageSync('phone', data.phone);
						if (data.phone) {
							uni.navigateTo({
								url: '/pages/department/index'
							});
						}

					} else {
						this.$toast(errMsg || '获取手机号失败～');
					}
				} catch (error) {
					console.error(error);
				}
			},

			agree() {
				this.showPrivacy = false
				//this.getChatUserPhone(this.phoneCode)
			},

			errorPhoneNumber(e) {
				console.log('拒绝授权', e);
			},

			decryptPhoneNumber(e) {
				if (!this.authorize) {
					return uni.showToast({
						title: '请先勾选协议',
						icon: 'none'
					});
				}
				const userInfo = uni.getStorageSync('userInfo')
				this.phoneCode = e.detail.code
				this.getChatUserPhone({
					code: e.detail.code,
					...userInfo,
				});
			},

			toAuthorize() {
				this.authorize = !this.authorize;
			},

			openPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/index'
				})
			},

			openService() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/service/index'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		background: linear-gradient(180.00deg, rgb(255, 255, 255), rgba(255, 255, 255, 0) 100%);
		padding: 0 22rpx;

		.logo-header {
			width: calc(100% + 6rpx);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 58rpx;
			margin: 20rpx 0 48rpx;

			.logo-title {
				flex: 1;

				.first-text {
					font-size: 64rpx;
					font-weight: 600;
					line-height: 1;
					margin-bottom: 26rpx;
				}

				.second-text {
					font-size: 32rpx;
					font-weight: 500;
					height: 48rpx;
					line-height: 48rpx;
				}
			}

			.logo-cart {
				width: 320rpx;
				height: 332rpx;
			}
		}

		.auth-box {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 32rpx 32rpx 0 0;
			padding-top: 366rpx;

			.logo-text {
				/* 欢迎登录壹度便利 */

				height: 58rpx;
				color: rgb(22, 118, 193);
				font-size: 40rpx;
				font-weight: 700;
				line-height: 58rpx;
				text-align: center;
			}

			.logo-img {
				margin-top: 48rpx;
				width: 180rpx;
				height: 160rpx;

				margin-bottom: 128rpx;
			}

			.ccuts-content {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;


				.phone-number {
					color: rgb(0, 0, 0);
					font-size: 40rpx;
					font-weight: 400;
					line-height: 52rpx;
					letter-spacing: 0rpx;
				}

				.phone-number-01 {
					margin: 16rpx 0 32rpx 0;
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					letter-spacing: 0rpx;
				}

			}

			.btn {
				font-size: 32rpx;
				line-height: 96rpx;
				width: 590rpx;
				height: 112rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgb(255, 255, 255);

				background: rgb(22, 118, 193);
				border-radius: 200rpx;
			}

			.agreement {
				position: fixed;
				bottom: 114rpx;
				left: 0;
				font-size: 24rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.content-main {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.authorize {
					display: flex;
					align-items: center;

					.text-02 {
						position: relative;
					}

					.circle {
						width: 30rpx;
						height: 30rpx;
						border: 2rpx solid rgb(208, 208, 208);
						border-radius: 50%;
						position: relative;

					}

					.select-circle {
						position: absolute;
						width: 22rpx;
						height: 22rpx;
						top: 4rpx;
						left: 4rpx;
					}

					.info {
						color: #999999;
						line-height: 40rpx;
						height: 40rpx;
						margin-left: 8rpx;
					}
				}


				.detail {
					line-height: 40rpx;
					height: 40rpx;
					font-size: 24rpx;
					margin-left: 14rpx;

					.argree {
						color: rgb(153, 153, 153);
					}

					.style {

						color: rgb(22, 118, 193);
					}
				}
			}
		}
	}
</style>